<template>

    <el-image v-bind="$attrs"
              :style="{width:realWidth, height:realHeight, borderRadius:realBorderRadius}"
              :src="showSrc_c"
              fit="cover"
              :preview-src-list="previews" :preview-teleported="true">
        <template #error>
            <div class="image-slot">
                <el-icon :style="{width:realWidth, height:realWidth, borderRadius:realBorderRadius}"><icon-picture /></el-icon>
            </div>
        </template>
    </el-image>

</template>

<script setup lang="ts">


import { Picture as IconPicture } from '@element-plus/icons-vue'
import {computed} from "vue";

const props = withDefaults(defineProps<{
    src?: string | any[],
    width?: string | number,
    height?: string | number,
    borderRadius?: boolean,
    preview?: boolean,
}>(),{
    width: "100%",
    height: "100%",
    borderRadius: true,
    preview: true
})

const showSrc_c = computed(() => {
    let img: any = props.src
    if(Array.isArray(img)){
        return img[0]
    }else{
        return img
    }
})

const previews = computed(() => {
    if (!props.preview){
        return []
    }
    let img = props.src
    if(Array.isArray(img)){
        return img
    }else{
        return [img]
    }
})

const realWidth = computed(() => {
    return typeof props.width == "string" ? props.width : `${props.width}px`
})
const realHeight = computed(() => {
    return typeof props.height == "string" ? props.height : `${props.height}px`
})
const realBorderRadius = computed(() => {
    return props.borderRadius ?  '4px' : 'none'
})

</script>

<style scoped>

</style>